<template>
	<!-- <div class="equipmentEditor">
		
		<div class="pageContent">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">装备分类列表</div>
			</div>
		</div>
	</div> -->
	<div>
		<div class="breadcrumb">
			<el-button type="text" size=" " icon="el-icon-arrow-left" @click="$router.back()">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle">
				<div class="tableTitle">装备名称及编号</div>
			</div>
			<div class="tableBoxTable flex" style="margin-bottom: 50px;justify-content: space-between;">
				<div>
					<el-form ref="form" :model="sizeForm" label-width="90px" size="mini">
						<!-- <el-form-item label="装备分类：">
							<el-select v-model="sizeForm.region" class="formWidth" placeholder="选择/输入装备类型">
								<el-option label="区域一" value="shanghai"></el-option>
								<el-option label="区域二" value="beijing"></el-option>
							</el-select>
						</el-form-item> -->
						<el-form-item label="装备名称：">
							<el-input v-model="sizeForm.equipmentName" placeholder="请输入装备名称" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="装备品牌：">
							<el-input v-model="sizeForm.equipmentBrand" placeholder="请输入装备的品牌" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="装备型号：">
							<el-input v-model="sizeForm.equipmentModel" placeholder="请输入装备的型号" class="formWidth"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div>
					<el-upload
					  class="avatar-uploader"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :show-file-list="false"
					  :http-request="uploadFile">
					  <img v-if="sizeForm.equipmentPhotos" :src="sizeForm.equipmentPhotos" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					  <br />
					  <el-button type="text">上传/更改 装备照片</el-button>
					</el-upload>
				</div>
				<!-- <equipmentType></equipmentType> -->
			</div>
			<div class="menberConTitle">
				<div class="tableTitle">装备属性选择</div>
			</div>
			<div class="tableBoxTable">
				<el-form ref="form" :model="propertyData" size="mini" label-width="auto" label-position="right">
					<el-form-item v-for="(value, key) in propertyList" :label="`${value.name}:`" :key="key">
						<el-input v-model="value.value" @input="propertyDataInput(value.name, value.value)" placeholder="请输入装备名称" class="formWidth">
							<div slot="append" title="删除" style="cursor: pointer;" @click="deleteProperty(value.name)"><i class="el-icon-close"></i></div>
						</el-input>
					</el-form-item>
				</el-form>
				<el-form ref="form" :model="sizeForm" label-width="90px" size="mini">
					<el-form-item label="">
						<el-button type="primary" @click="opendialog">+添加属性</el-button>
					</el-form-item>
				</el-form>
				<!-- <equipmentDetail></equipmentDetail> -->
				<!-- <pagina-tion :totalNum="menberData.pageTotal" @paginaClick="paginaClick"></pagina-tion> -->
			</div>
		</div>
		<div class="submitBtns">
			<el-button type="primary" size=" " round="" @click="accomplish">完成</el-button>
		</div>
		<!-- 添加属性 -->
		<el-dialog title="添加属性" :visible.sync="dialogVisible" width="30%">
		  <span>
			  <el-form ref="form" :model="dialogData" label-width="80px" size="mini">
			  	<el-form-item label="属性名称">
			  		<el-input v-model="dialogData.name" placeholder="请输入装备属性名称" class=""></el-input>
			  	</el-form-item>
				<el-form-item label="属性参数">
					<el-input v-model="dialogData.value" placeholder="请输入装备属性参数" class=""></el-input>
				</el-form-item>
			  </el-form>
		  </span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="submitAdd">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				sizeForm:{
					id: '', // 
					companyId: '', // 公司ID
					equipmentRelationId: '', // 装备分类id
					equipmentPhotos: '', // 装备照片
					equipmentName: '', // 装备名称
					equipmentBrand: '', // 装备品牌
					equipmentModel: '', // 装备型号
					property: '' // 自定义属性值
				},
				// 弹窗
				dialogVisible: false,
				dialogMap: new Map(),
				dialogData: {
					name: '',
					value: ''
				},
				// 自定义属性表单数据，，，空对象,空数组
				propertyList: [],
				propertyData: {},
				isEditor: false,
				postUrl: ''
			}
		},
		mounted() {
			// console.log(this.$route.params.id)
			this.sizeForm.companyId = this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
			// console.log(this.$route.query.iseditor)
			this.isEditor = this.$route.query.iseditor==1?true:false
			if(this.isEditor){
				this.postUrl = this.$api.updateEquipment
				this.getPageData(this.$route.params.id)
				console.log('编辑')
			} else {
				this.postUrl = this.$api.newEquipment
				this.sizeForm.equipmentRelationId = this.$route.params.id
				console.log('新增')
			}
		},
		watch: {
			dialogVisible(newData){
				if(!newData){
					this.dialogData.name = ''
					this.dialogData.value = ''
				}
			}
		},
		methods: {
			getPageData(id){
				this.$request.postForm(this.$api.getDetailsequipmentDetailed, {
					id
				}).then(res=>{
					if(res.code == 200){
						let data = res.data
						this.sizeForm.id = data.id
						this.sizeForm.equipmentRelationId = data.equipmentRelationId
						this.sizeForm.equipmentPhotos = data.equipmentPhotos
						this.sizeForm.equipmentName = data.equipmentName
						this.sizeForm.equipmentBrand = data.equipmentBrand
						this.sizeForm.equipmentModel = data.equipmentModel
						this.sizeForm.property = JSON.parse(data.definitions)
						if(data.definitions){
							let propertype = JSON.parse(data.definitions)
							propertype.forEach((v)=>{
								this.dialogMap.set(v.name, v.value)
								this.propertyList.push(v)
							})
							// this.propertyList = eval(data.definitions)
						} else {
							this.propertyList = []
						}
					}
				})
			},
			accomplish(){
				// 完成按钮
				// console.log(this.propertyList)
				let postData = this.sizeForm
				if(!postData.equipmentName){
					this.$message.error('请填写装备名称')
					return
				} else if(!postData.equipmentBrand){
					this.$message.error('请填写装备品牌')
					return
				} else if(!postData.equipmentModel){
					this.$message.error('请填写装备型号')
					return
				}
				//  else if(!postData.equipmentPhotos){
				// 	this.$message.error('请添加装备照片')
				// 	return
				// }
				// console.log(JSON.stringify(this.propertyList))
				// return
				postData.property = JSON.stringify(this.propertyList)
				
				this.$request.postForm(this.postUrl, postData).then(res=>{
					if(res.code == 200){
						this.$message.success(this.isEditor?'修改成功':'新增成功')
						setTimeout(()=>{
							this.$router.back()
						},300)
					}
				})
			},
			propertyDataInput(name, value){
				console.log(name, value)
				if(this.dialogMap.has(name)){
					this.dialogMap.set(name, value)
				}
			},
			submitAdd(){
				// 添加属性
				if(!this.dialogData.name){
					this.$message.error('请填写装备名称')
					return
				}
				if (this.dialogMap.has(this.dialogData.name)) {
					this.$message.error('已有该属性')
				} else{
					this.dialogMap.set(this.dialogData.name, this.dialogData.value)
					this.propertyList = []
					this.dialogMap.forEach((value, key)=>{
						// let list = [key, value]
						let lists = {
							name: key,
							value: value
						}
						this.propertyList.push(lists)
					})
				}
				this.$forceUpdate()
				this.dialogVisible = false
			},
			deleteProperty(name){
				// 删除属性
				this.dialogMap.delete(name)
				this.propertyList = []
				this.dialogMap.forEach((value, key)=>{
					// let list = [key, value]
					let lists = {
						name: key,
						value: value
					}
					this.propertyList.push(lists)
				})
			},
			opendialog(){
				// 打开弹窗
				this.dialogVisible = true
			},
			uploadFile(file){
				// 上传文件
				const File = file.file
				const fileSize = 1024 * 1024 * 2 // 限制大小2MB
				if (File.size > fileSize || File.type != 'image/jpeg') {
					this.$message.error('上传图片大小不能大于2M，且必须为jpg格式')
					return
				}
				let formData = new FormData()
				formData.append('identifier', 'equipment')
				formData.append('file', File)
				this.$request.uploading(this.$api.uploadImg, formData).then(res=>{
					if(res.code == 200){
						console.log(res.data)
						this.sizeForm.equipmentPhotos = res.data
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb {
		padding: 10px 20px;
	}

	.tableNavBox {
		padding: 0 20px;
		padding-bottom: 40px;
		border-bottom: 1px solid #DCDCDC;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}
	.formWidth{
		width: 450px;
	}
	/* .equipmentEditor {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	} */

	/* .tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	} */
	.pageContent {
		height: 40px;
		line-height: 40px;
	}

	.pageContent>>>.isdelete {
		color: #F42929;
	}
	.submitBtns{
		text-align: center;
		padding: 40px 0;
	}
	.submitBtns button{
		width: 150px;
	}
	.tableBoxTable>>> .el-upload {
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
		margin-right: 40px;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 150px;
	    height: 150px;
	    line-height: 150px;
	    text-align: center;
		border: 1px dashed #d9d9d9;
	  }
	  .avatar {
	    width: 150px;
	    height: 150px;
	    display: block;
		border: 1px dashed #d9d9d9;
	  }
</style>
